<template>
  <div class="register">
    <div class="register-container">
      <div class="register-ad">
        <img src="@/assets/images/login_ad.png" />
      </div>
      <div class="register-box">
        <div class="register-header">
          <h2>注册</h2>
        </div>
        <register-form @submit="register" />
        <div class="register-tool">
          <p>已有账号？<router-link to="/login">去登陆</router-link></p>
        </div>
      </div>
    </div>
    <geetest-captcha ref="captchaCom" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import RegisterForm from './components/Form/index'
import GeetestCaptcha from '@/components/GeetestCaptcha'
import useUserStore from '@/stores/user'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const captchaCom = ref()
const router = useRouter()

let submitData = null
const register = async (userData) => {
  const geetestRes = await captchaCom.value.validate()
  if (!geetestRes) return ElMessage.error('请完成验证')
  const { role = {} } = userData
  submitData = {
    ...userData,
    roles: role?.roleId ? [role.roleId] : [],
  }
  userStore
    .register(submitData)
    .then((res) => {
      const user = res?.data
      if (user.userId) {
        ElMessage.success('注册成功, 请登录')
        router.replace(`/auth/login${role?.roleName ? `?loginRole=${role.roleName}` : ''}`)
      }
    })
    .catch((err) => {
      console.log('err=>', err)
      ElMessage.error('注册失败')
    })
}
</script>

<style lang="scss">
.register {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  &-ad {
    width: 550px;
    height: 705px;
    > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  &-container {
    display: flex;
    min-height: 538px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  &-box {
    width: 650px;
    padding: 40px 60px;
  }
  &-header {
    margin-bottom: 16px;
    > h2 {
      font-size: 24px;
      font-weight: 500;
      line-height: 32px;
      text-align: center;
      color: #333;
    }
  }
  &-bind {
    &-header {
      display: flex;
      justify-content: space-between;
    }
    &-jump {
      display: flex;
      align-items: center;
      color: #bbabb2;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
  &-tool {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    a {
      text-decoration: none;
      color: var(--el-color-primary);
    }
  }
}
</style>
